<template>
  <div class="login canvasContaniner" ref="can">
          <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container elFormStyle"  v-show="forgetPws">
              <h3 class="title">泛美系统管理</h3>
              <el-form-item prop="email">
                <el-input type="text" v-model="ruleForm2.email" auto-complete="off" placeholder="账号"></el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input type="password" v-model="ruleForm2.pwd" auto-complete="off" placeholder="密码" @keydown.native="keyLogin($event)"></el-input>
              </el-form-item>
              <el-checkbox v-model="checked" checked class="remember">记住账号</el-checkbox>
              <!--<el-button class="forgetPws" @click="forgetPwsNum">忘记密码?</el-button>-->
                <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
            </el-form> 
            <el-form  label-position="left" label-width="0px" class="demo-ruleForm login-container" style="margin-bottom: 0px" v-show="!forgetPws">
              <h3 class="title">忘记密码</h3>
                <el-input type="text" v-model="uesrEmail" auto-complete="off" placeholder="邮箱"></el-input>
              <el-button type="text" @click="returnLogin" style="margin-left: 80%">返回登录</el-button>
              <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="sendSet">提交</el-button>
              </el-form-item>
              <span class="titleInfo" ref='isTrueEmail'></span>
        </el-form>
  </div>
</template>

<script>
  import { requestLogin } from '@/assets/util/api.js'
  export default {
    data() {
      return {
        // 是否忘记密码状态
        forgetPws: true,
        uesrEmail: '',
        logining: false,
        ruleForm2: {
          email: "",
          pwd: ""
        },
        rules2: {
          email: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ]
        },
        checked: true,
        //公共配置项
        baseTopic:"recruit"
      };
    },
    mounted(){
//  	this.isLogin(this);
      let userInfoname = localStorage.getItem("userInfo");
      if (userInfoname) {
        this.ruleForm2.email = userInfoname;
        this.uesrEmail = userInfoname;
      } else {
        this.ruleForm2 ={email:"",pwd:""};
        this.uesrEmail = '';
      };
      container = document.createElement('div' );
      this.$refs.can.appendChild( container );  
      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
      camera.position.z = 1000;
    
      scene = new THREE.Scene();
    
      particles = new Array();
    
      var PI2 = Math.PI * 2;
      var material = new THREE.ParticleCanvasMaterial( {
    
        color: 0x0078de,
        program: function ( context ) {
          context.beginPath();
          context.arc( 0, 0, 1, 0, PI2, true );
          context.fill();
    
        }
    
      } );
    
      var i = 0;
    
      for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
    
        for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
    
          particle = particles[ i ++ ] = new THREE.Particle( material );
          particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
          particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
          scene.add( particle );
    
        }
    
      }
    
      renderer = new THREE.CanvasRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      container.appendChild( renderer.domElement );
    
      document.addEventListener( 'mousemove', onDocumentMouseMove, false );
      //
    
      window.addEventListener( 'resize', onWindowResize, false);

      animate();
    },
    methods: {
      handleSubmit2:function(){
        var _this = this;
//      _this.RouterTo(_this,"/personmanagement")
           this.$refs.ruleForm2.validate((valid) => {
             if (valid) {
             	this.logining = true;
							let paw = md5(this.ruleForm2.pwd);
							let timestamp = Date.parse(new Date()) / 1000;
							let params = {
								"username": this.ruleForm2.email,
								"password": paw.toUpperCase(),
								"time": timestamp.toString()
							}
							console.log(_this.axios)
             	 requestLogin(_this,JSON.stringify(params)).then(res=>{
             	 		console.log("登录成功")
				        	console.log(res)
				        	if(res.data.state == true){
				        		var start_time = Date.parse(new Date())/1000;
										var end_time = parseInt(Date.parse(new Date())/1000) + parseInt(res.data.data.expire_time);
										_this.inStorage("set","access_token",res.data.data.access_token);
										_this.inStorage("set","refresh_token",res.data.data.refresh_token);
										_this.inStorage("set",'expire_time',res.data.data.expire_time);
										_this.inStorage("set","checked",_this.checked);
										_this.inStorage("set","start_time",start_time);
										_this.inStorage("set",'end_time',end_time);
										_this.inStorage("set","userInfo",_this.ruleForm2.email);
										_this.inStorage("set","statelocal",'true');
										_this.inStorage("set","topic",_this.baseTopic);
										
				        		_this.RouterTo(_this,"/personmanagement")
				        	}
				        	if(res.data.code){
				        		_this.$message.error(_this.publicMsg(res.data.code),res.data.message);
				        	}
				        	_this.logining = false;
				        })
        //       this.logining = true;
        //       let ruleForm2 = JSON.stringify(this.ruleForm2);
        //        requestLogin(ruleForm2).then((res)=>{
        //           console.log(res.data)
        //           if (res.data.status === 0) {
        //             if (_this.checked) {
        //                let userInfo = _this.inStorage("userInfo", this.ruleForm2.email);
        //             } else {
        //               _this.inStorage("userInfo", "");
        //               sessionStorage.setItem("userInfosession", this.ruleForm2.email)
        //             } 
        //              sessionStorage.setItem("loginStatus", "1");
        //              var userperadmin = JSON.stringify(res.data);
        //              _this.inStorage("userperadmin",userperadmin);
        //              // 登录通过后获取用户权限
        //              let sessionid ={
        //                  sessionid:res.data.sessionid
        //              }; 
        //              userPermissionReg(sessionid).then(res=>{
        //                 console.log(res.data)
        //                 if (res.data.status === 0) {
        //                    _this.logining = false;
        //                    let userPermission =JSON.stringify({data:res.data.userPermission});
        //                    console.log(res)
        //                    sessionStorage.setItem('userPermiss',escape(userPermission));
        //                    _this.$router.push("/dailyInfo");
        //                 };
        //                 if (res.data.status === 1) {
        //                   _this.$message.error('登录失败,请重新登录');
        //                   _this.logining = false;
        //                 };
        //              });
        //           } else {
        //             console.log(res.data.statusMsg)
        //             _this.$message.error(res.data.statusMsg);
        //             _this.logining = false;
        //           }
        //       }).catch(res=>{
        //          _this.$message.error('登录失败,请联系管理员');
        //          _this.logining = false;
        //       })
             } else {
               console.log('error submit!!');
               return false;
             }
           });
      },
      forgetPwsNum(){
        this.forgetPws = !this.forgetPws;
      },
      returnLogin(){
        this.forgetPws = !this.forgetPws;
      },
      // enter登录
      keyLogin(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13){ 
           this.handleSubmit2();
         }
      },
      sendSet(){
        var _this = this;
        if (_this.uesrEmail) {
          var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/; 
          if (!reg.test(_this.uesrEmail)) {
            _this.$refs.isTrueEmail.innerText = "邮箱格式不正确";
            setTimeout(function(){
              _this.$refs.isTrueEmail.innerText = " ";
            },1500)
          } else {
            // 进行数据请求
            var email = {email:_this.uesrEmail};
            var setEmail = JSON.stringify(email)
            console.log(setEmail)
            forgetPaw(setEmail).then(res=>{
              console.log(res.data)
              if (res.data.status == 0) {
                //  _this.$message({
                //   message:res.data.statusMsg,
                //   type: 'success'
                // });
               };
               if (res.data.status == 1) {
                //  _this.$message.error('提交失败,请重新提交');
               };
            })
          }
        } else {
          _this.$refs.isTrueEmail.innerText = "用户名不能为空";
          setTimeout(function(){
              _this.$refs.isTrueEmail.innerText = " ";
            },1500)
        }
      }
    }
  }
  var SEPARATION = 100,
    AMOUNTX = 50,
    AMOUNTY = 50;

  var container;
  var camera, scene, renderer;

  var particles, particle, count = 0;

  var mouseX = 0,
    mouseY = -200;

  var windowHalfX = window.innerWidth / 2;//var windowHalfY = window.innerHeight / 2;
  //var windowHalfY = window.innerHeight / 2;


  // animate();

  function init() {

    

  }

  function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
  //windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

  }

  //

  function onDocumentMouseMove( event ) {

    mouseX = event.clientX - windowHalfX;
  //mouseY = event.clientY - windowHalfY;

  }

  function onDocumentTouchStart( event ) {

    if ( event.touches.length === 1 ) {

      event.preventDefault();

      mouseX = event.touches[ 0 ].pageX - windowHalfX;
  //  mouseY = event.touches[ 0 ].pageY - windowHalfY;

    }

  }

  function onDocumentTouchMove( event ) {

    if ( event.touches.length === 1 ) {

      event.preventDefault();

      mouseX = event.touches[ 0 ].pageX - windowHalfX;
  //  mouseY = event.touches[ 0 ].pageY - windowHalfY;

    }

  }

  //

  function animate() {

    requestAnimationFrame( animate );

    render();


  }

  function render() {

    camera.position.x += ( mouseX - camera.position.x ) * .05;
    camera.position.y += ( - mouseY - camera.position.y ) * .05;
    camera.lookAt( scene.position );

    var i = 0;

    for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

      for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

        particle = particles[ i++ ];
        particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
        particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 2 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;

      }

    }

    renderer.render( scene, camera );

    count += 0.1;

  }
</script>
<style lang="scss" scoped>
  .login{
    width:100%;
    height: 100%;
    background:#141a48;
  }
  .login .elFormStyle{
    margin-bottom: 0px;
    position:absolute;
    left:50%;
    top:50%;
    margin-top: -10rem;
    margin-left: -10rem;
  }
  .login-container {
    -webkit-border-radius: 0.32rem;
    border-radius: 0.32rem;
    -moz-border-radius: 0.32rem;
    background-clip: padding-box;
    width: 16.25rem;
    padding: 2.19rem 2.19rem 1.6rem 2.19rem;
    background:rgba(255,255,255,0.7);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 1.56rem #cac6c6;
    position:absolute;
    left:50%;
    top:50%;
    margin-top: -10rem;
    margin-left: -10rem;
    .title {
      margin: 0px auto 2.5rem auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 2.19rem 0px;
      float:left;
    }
    .el-row{
      min-width: 56.25rem;
    }
    .forgetPws{
      float: right;
      padding:0px;
      border:0px solid #fff;
      color: #409EFF;
      line-height: 0.8rem;
      z-index: 100;
      background: rgba(255,255,255,0)
    }
    .titleInfo{
     display: inline-block;
     font-size: 0.6rem;
     color:red;
    }
  }
</style>
